<template>
    <view class="page-quote-info">
        <view v-if="hasData" class="goods-name">{{qouteInfo.goodsName}}</view>
        <view v-if="hasData" class="goods-info" >
            <text>{{qouteInfo.countryOrigin ? qouteInfo.countryOrigin : '-'}}&nbsp;</text>
            <text>{{qouteInfo.vendorNo ? qouteInfo.vendorNo : '-'}}</text>
            <text>&nbsp;求购量&nbsp;</text>
            <text>{{qouteInfo.weight ? qouteInfo.weight + '吨' : '-'}}</text>
        </view>
        <block v-for="(item, index) in qouteInfo.demandQuotesVoPageInfo" :key="index">
            <quote-info-item :data="item">

            </quote-info-item>
        </block>
        <view class="no-result" v-if="noData">
            <image src="../../static/ibs/img_home_empty.png"  mode="aspectFill"/>
            <text>暂无报价信息</text>
        </view>
    </view>
</template>
<script type="text/ecmascript-6">
    import quoteInfoItem from '@/components/ibs/quoteInfoItem.vue'
    import api from '@/common/api.js';   //请求API方法
    export default {
        components: {
            quoteInfoItem
        },
        data() {
            return {
                qouteInfo: {
                    demandQuotesVoPageInfo: [

                    ],
                    goodsName: '',
                    countryOrigin: null,
                    vendorNo: null,
                    weight: null
                },
                qouteList: [], // 报价信息列表
                hasData: false, // 判断是否请求到了数据
                noData: false // 判断是否显示无报价信息的UI
            };
        },
        onLoad(option) {
            this.getData(option.id);
        },
        methods: {
            /**
             * 初始化我的求购列表数据
             * @param id 我的求购的ID
             */
            getData(id) {
                let that = this;
                api.httpRequest('/wechat/user/demandQuoteInfo', {demandId: id}, 'POST', true).then((res) => {
                    console.log(JSON.stringify(res));
                    if (res.code === 200) {
                        that.hasData = true;
                        that.qouteInfo = res.result;
                        if (!res.result.demandQuotesVoPageInfo || res.result.demandQuotesVoPageInfo.length <= 0) {
                            that.noData = true;
                        } else {
                            that.noData = false;
                        }
                        console.log('that.qouteInfo: ' +JSON.stringify(that.qouteInfo));
                    } else {
                        that.hasData = false;
                        that.showError(res.message);
                    }
                });
            }
        }
    };
</script>
<style>
    page{
        height: 100%;
    }
    .page-quote-info {
        height: 100%;
        background-color: #f2f2f5;
    }
    .page-quote-info .goods-name {
        padding: 20upx 24upx;
        font-size: 32upx;
        border-top: 1upx #e5e5e5 solid;
        background-color: #ffffff;
    }
    .page-quote-info .goods-info {
        display: flex;
        padding: 0 24upx 20upx 24upx;
        margin-bottom: 20upx;
        font-size: 28upx;
        background-color: #ffffff;
        border-bottom: 1upx #e5e5e5 solid;
    }
    .page-quote-info .no-result{
        background: #f2f2f5;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        margin-top: 144upx;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        overflow: hidden;
        position: fixed;

    }
    .page-quote-info .no-result image{
        width: 200upx;
        height: 200upx;
        display: block;
        margin:0 auto;
        margin-top:32vh;
    }
</style>